import React from 'react'
import {  Card } from '@hi-ui/hiui'
import { useTheme } from '../contexts/ThemeContext'
import UserForm from './UserForm'
import UserManagement from './UserManagement'
const ThemedContent = () => {
  const { theme } = useTheme()
  
  return (
    <main style={{
      flex: 1,
      padding: '24px',
      backgroundColor: theme.colors.background
    }}>
      <Card 
        title="主题信息"
        style={{
          marginBottom: '20px',
          backgroundColor: theme.colors.surface,
          borderColor: theme.colors.border
        }}
      >
        <p style={{ color: theme.colors.text, margin: 0 }}>
          当前主题：{theme.name}
        </p>
        <p style={{ color: theme.colors.textSecondary, margin: '8px 0 0 0' }}>
          主色调：{theme.colors.primary}
        </p>
      </Card>
      <UserForm />
      <UserManagement />
    </main>
  )
}

export default ThemedContent